<script setup lang="ts">
  import { useGetDetailOperateLog } from '@/services/pages/return-factory/useReturnFactory'
  import _ from 'lodash'
  import { onMounted, onUnmounted, ref } from 'vue'

  const { total, loading, currentPage, operateLogList, getOperateLogParam, getOperateLog } =
    useGetDetailOperateLog()

  defineOptions({
    name: 'OperateLogReturnFactoryDetail',
  })

  const props = defineProps({
    returnFactoryId: {
      type: String,
      required: true,
    },
  })

  // 时间线组件颜色配置
  const timeItemColorOption = ['#007cff', '#a06eff', '#00c0c0', '#e69103']

  // 操作内容颜色配置
  const operateLogContentDivClass = ['card-priamry', 'card-purple', 'card-green', 'card-range']

  // 当前页码
  const page = ref(1)

  // 当前页面的高度，用于在高度更新后，计算当前高度应该显示多少条操作记录
  const currentPageClientHeight = ref(document.body.clientHeight)

  /**
   * 获取列表方法
   */
  const getList = async () => {
    setLimit()
    getOperateLogParam.value.page = page.value
    await getOperateLog(props.returnFactoryId)
  }

  /**
   * 页码更新事件
   * @param {Number} _page - 更新后的页码
   */
  const onChangePage = (_page: number) => {
    page.value = _page
    getList()
  }

  /**
   * 根据页面大小设置每页显示多少条
   */
  const setLimit = () => {
    if (document.body.clientHeight >= 900) {
      getOperateLogParam.value.limit = 6
    } else {
      getOperateLogParam.value.limit = 5
    }
  }

  /**
   * 页面大小更新的回调函数
   * 防抖是为了解决频繁发送请求的问题
   */
  const windowResizeCalback = _.debounce(() => {
    if (currentPageClientHeight.value !== document.body.clientHeight) {
      currentPageClientHeight.value = document.body.clientHeight
      getList()
    }
  }, 600)

  defineExpose({
    getList,
    total,
  })

  onMounted(() => {
    window.addEventListener('resize', windowResizeCalback)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', windowResizeCalback)
  })
</script>

<template>
  <div v-loading="loading" class="return-factory-detail-operate-log">
    <div class="content">
      <el-timeline>
        <el-timeline-item
          v-for="(log, index) in operateLogList"
          :key="index"
          class="box-card"
          :color="timeItemColorOption[index % 4]"
          :timestamp="log.createTime"
          placement="top"
        >
          <el-card>
            <template #header>
              <div :class="operateLogContentDivClass[index % 4]">
                {{ '【' + log.createEmpType + '】 ' + log.createEmp + ' ' + log.event }}
              </div>
            </template>
            <div class="c_note">
              {{ log.content }}
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="pagination_container">
      <el-pagination
        :pager-count="5"
        size="small"
        class="page_bo"
        :current-page="currentPage"
        :page-size="getOperateLogParam.limit"
        :total="total"
        layout="prev, pager, next"
        @current-change="onChangePage"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-card__header) {
    padding: 10px 0;
    margin: 0 10px;
  }

  :deep(.el-card__body) {
    padding: 0 10px;
    font-size: 12px;
  }

  :deep(.el-card) {
    border: none;
    width: 99%;
    border-radius: 0;

    &.is-always-shadow {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
    }
  }

  .box-card {
    padding-bottom: 20px;

    :deep(.el-timeline-item__tail) {
      left: 5px !important;
    }

    :deep(.el-timeline-item__node) {
      left: 0 !important;
    }

    :deep(.el-timeline-item__wrapper) {
      padding-left: 32px;
    }
  }

  .c_note {
    color: #999;
    margin: 8px 0;
  }

  .card-priamry {
    background-color: #e4eef8;
    color: #007cff;
    padding: 4px;
    font-size: 12px;
  }

  .card-purple {
    background-color: #eee9fa;
    color: #a06eff;
    padding: 4px;
    font-size: 12px;
  }

  .card-range {
    background-color: #f5eee3;
    color: #e69103;
    padding: 4px;
    font-size: 12px;
  }

  .card-green {
    background-color: #d2f7f7;
    color: #00c0c0;
    padding: 4px;
    font-size: 12px;
  }

  .pagination_container {
    :deep(.el-pagination) {
      display: flex;
      justify-content: center;
    }
  }
</style>
